<template>
  <el-dialog
    v-model="dialogVisible"
    title="发放积分"
    width="50%"
    :before-close="handleDialogClose"
  >
    <div class="content">
      <el-form ref="grantRef" :model="form" label-width="auto">
        <el-form-item
          label="记录内容"
          prop="remark"
          :rules="[
            {
              required: true,
              message: '请输入记录内容',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="form.remark"
            placeholder="请输入记录内容"
            style="width: 320px"
          />
        </el-form-item>
        <el-form-item
          label="增减方式"
          prop="type"
          :rules="[
            {
              required: true,
              message: '请选择增减方式',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="form.type"
            placeholder="请选择增减方式"
            clearable
            style="width: 320px"
          >
            <el-option
              v-for="calc in calcList"
              :key="calc.value"
              :label="calc.label"
              :value="calc.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="积分数量" prop="score">
          <el-input-number
            v-model="form.score"
            :min="0"
            controls-position="right"
            :precision="0"
          >
            <template #prefix>
              <span>{{ form.type === "2" ? "-" : "+" }}</span>
            </template>
          </el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { savePointsAPI } from "@/api/marketing/points";
const props = defineProps({});
// 变量--------------------------------------------------------------------------------------------------------------------
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogVisible = ref(false);
const grantRef = ref(null);

// 增减方式
const calcList = [
  { value: "1", label: "增加" },
  { value: "2", label: "减少" },
];

const data = reactive({
  form: {
    remark: null,
    score: 0,
    type: "1",
    studentId: null,
  },
});

const { form } = toRefs(data);

const emits = defineEmits(["refreshPage"]);

// 事件--------------------------------------------------------------------------------------------------------------------

function handleDialogOpen(studentId) {
  form.value.studentId = studentId;
  dialogVisible.value = true;
}

function handleDialogClose() {
  resetForm();
  dialogVisible.value = false;
}

function handleConfirm() {
  proxy.$refs["grantRef"].validate((valid) => {
    if (valid) {
      savePoints();
    } else {
      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
    }
  });
}

function savePoints() {
  loading.value = true;
  const { remark, type, score, studentId } = form.value;
  const map = { remark, score: type === "1" ? score : score * -1, studentId };
  savePointsAPI(map).then((response) => {
    loading.value = false;
    refreshParent();
    handleDialogClose();
  });
}

function refreshParent() {
  emits("refreshPage");
}

const resetForm = () => {
  if (grantRef.value) {
    grantRef.value.resetFields();
  }
};

defineExpose({ handleDialogOpen }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
